import 'package:amway_superapp_creator_plugin/analysis/zhuge_edit.dart';
import 'package:amway_superapp_creator_plugin/config/colors_config.dart';
import 'package:amway_superapp_creator_plugin/utils/colors_util.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/screenutil.dart';

/// @descriptions: 修改主题配色页
/// @author: liya
/// @date: 2020-10-15
/// version: 1.0
class ChangeThemePage extends StatefulWidget {
  @override
  ChangeThemePageState createState() => new ChangeThemePageState();
}

class ChangeThemePageState extends State<ChangeThemePage> {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: AppBar(
          backgroundColor: Colors.white,
          elevation: 0,
          //去除阴影
          brightness: Brightness.light,
          //黑色状态栏
          title: Text(
            "修改配色",
            style: TextStyle(
                fontSize: ScreenUtil().setSp(20), color: ColorsConfig.c_2c2c2c),
          ),
          centerTitle: true,
          actions: [
            InkWell(
              child: Container(
                child: Text('保存',
                    style: TextStyle(
                        fontSize: ScreenUtil().setSp(18),
                        color: ColorUtil.fromHex('#FF0094A8'))),
                alignment: Alignment.center,
                padding: EdgeInsets.all(ScreenUtil().setHeight(11)),
              ),
              onTap: (){
                ZhugeEditAnalysis.editColorClickFinish("修改配色页",true,"#26000000");
              },
            ),
          ],
          leading: _buildBackButton()),
      bottomNavigationBar: Container(
        height: ScreenUtil().setHeight(126),
        width: double.infinity,
        decoration: BoxDecoration(boxShadow: [
          BoxShadow(
              offset: Offset(0, ScreenUtil().setHeight(-2)),
              blurRadius: ScreenUtil().setHeight(10),
              color: ColorUtil.fromHex('#26000000'))
        ], color: Colors.white),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            Padding(
              padding: EdgeInsets.only(top: ScreenUtil().setHeight(16)),
              child: Center(
                  child: Text(
                '请为您的创玩小站选择一个喜爱的配色吧！',
                style: TextStyle(
                    fontSize: ScreenUtil().setSp(12),
                    color: ColorsConfig.c_2c2c2c),
              )),
            ),
            Padding(
              padding: EdgeInsets.fromLTRB(ScreenUtil().setWidth(64),
                  ScreenUtil().setHeight(15), ScreenUtil().setWidth(64), 0),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: [
                  _buildCircleTag(ColorUtil.fromHex('#38539A'), false),
                  _buildCircleTag(ColorUtil.fromHex('#396E75'), false),
                  _buildCircleTag(ColorUtil.fromHex('#A65523'), true),
                  _buildCircleTag(ColorUtil.fromHex('#6F790C'), false),
                  _buildCircleTag(ColorUtil.fromHex('#7F3E3E'), false),
                ],
              ),
            )
          ],
        ),
      ),
      body: Container(
          padding: EdgeInsets.fromLTRB(
              ScreenUtil().setWidth(16), 0, ScreenUtil().setWidth(16), 0),
          color: Colors.white,
          child: Card(
            elevation: 2,
            shape:
                RoundedRectangleBorder(borderRadius: BorderRadius.circular(15)),
            child: Column(
              mainAxisSize: MainAxisSize.min,
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: <Widget>[
                Stack(
                  children: [
                    ClipRRect(
                      child: Image.network(
                        'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1605250770559&di=e7651d09824070934da6036cc7d5d2f5&imgtype=0&src=http%3A%2F%2Fwww.999zx.cn%2Fadm_file%2Ffck%2Fimages%2F2016%2F12%2FImage%2F2016121930849462.jpg',
                        fit: BoxFit.fill,
                        height: ScreenUtil().setSp(320),
                      ),
                      borderRadius: BorderRadius.only(
                          topLeft:
                              new Radius.circular(ScreenUtil().setHeight(15)),
                          topRight:
                              new Radius.circular(ScreenUtil().setHeight(15))),
                    ),
                    Container(
                      height: ScreenUtil().setHeight(46),
                      color: Colors.white,
                    ),
                    Positioned(
                      bottom: 0,
                      child: Image.asset(
                        'picture/icon_theme_decor.png',
                        height: ScreenUtil().setHeight(100),
                        width: ScreenUtil().setWidth(500),
                        fit: BoxFit.fill,
                        color: ColorUtil.fromHex('#E5FDFF'),
                        package: 'amway_superapp_creator_plugin',
                      ),
                    ),
                    Positioned(
                      child: CircleAvatar(
                        child: CircleAvatar(
                          radius: ScreenUtil().setHeight(42),
                          backgroundImage: NetworkImage(
                              "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1605250922785&di=3a740938c10b038d18b65a81b622a6aa&imgtype=0&src=http%3A%2F%2Fpic6.58cdn.com.cn%2Fmobile%2Fbig%2Fn_v242f9dea1883642f49bf07935db6d95ca.jpg%3Fw%3D425%26h%3D320"),
                        ),
                        radius: ScreenUtil().setHeight(44),
                        backgroundColor: Colors.white.withOpacity(0.3),
                      ),
                      bottom: ScreenUtil().setHeight(48),
                    ),
                  ],
                  alignment: Alignment.bottomCenter,
                  fit: StackFit.loose,
                ),
                Stack(
                  children: [
                    Padding(
                      padding: EdgeInsets.only(
                          bottom: ScreenUtil().setHeight(12),
                          top: ScreenUtil().setHeight(5)),
                      child: Center(
                          child: new Text('Zoey Wong',
                              style: TextStyle(
                                  fontSize: 26,
                                  color: ColorUtil.fromHex('#FF396E75')))),
                    ),
                    Positioned(
                      left: ScreenUtil().setWidth(273),
                      top: ScreenUtil().setHeight(5),
                      child: SizedBox(
                        width: ScreenUtil().setHeight(16),
                        height: ScreenUtil().setHeight(16),
                        child: GestureDetector(
                            child: Image.asset(
                          'picture/icon_share.png',
                          package: 'amway_superapp_creator_plugin',
                        )),
                      ),
                    )
                  ],
                  fit: StackFit.passthrough,
                ),
                Padding(
                  padding: EdgeInsets.symmetric(
                      horizontal: ScreenUtil().setWidth(17)),
                  child: Center(
                    child: Row(
                      children: [
                        _buildTag('时尚达人'),
                        _buildTag('美容专家'),
                        _buildTag('美妆博主'),
                        _buildTag('资深化妆品试验员'),
                      ],
                      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                    ),
                  ),
                ),
                Padding(
                  padding: EdgeInsets.fromLTRB(ScreenUtil().setWidth(37),
                      ScreenUtil().setWidth(16), ScreenUtil().setWidth(37), 0),
                  child: Center(
                    child: Text(
                      '美妆护肤既是我生活不可或缺的一部分。我相信最重要的事是通过美妆护肤来更爱自己。',
                      style: TextStyle(
                          fontSize: ScreenUtil().setHeight(14),
                          color: ColorUtil.fromHex('#FF396E75'),
                          fontWeight: FontWeight.bold),
                      textAlign: TextAlign.center,
                    ),
                  ),
                ),
                Padding(
                  padding: EdgeInsets.fromLTRB(
                      ScreenUtil().setWidth(22),
                      ScreenUtil().setHeight(10),
                      ScreenUtil().setWidth(22),
                      ScreenUtil().setHeight(41)),
                  child: Row(
                    children: [
                      CircleAvatar(
                        backgroundImage: AssetImage(
                          'picture/icon_wechat.png',
                          package: 'amway_superapp_creator_plugin',
                        ),
                        radius: ScreenUtil().setWidth(16),
                      ),
                      CircleAvatar(
                        backgroundImage: AssetImage('picture/icon_chat.png',
                            package: 'amway_superapp_creator_plugin'),
                        radius: ScreenUtil().setWidth(16),
                      ),
                      CircleAvatar(
                        backgroundImage: AssetImage('picture/icon_kuai.png',
                            package: 'amway_superapp_creator_plugin'),
                        radius: ScreenUtil().setWidth(16),
                      ),
                      CircleAvatar(
                        backgroundImage: AssetImage('picture/icon_douyin.png',
                            package: 'amway_superapp_creator_plugin'),
                        radius: ScreenUtil().setWidth(16),
                      ),
                      CircleAvatar(
                        backgroundImage: AssetImage('picture/icon_phone.png',
                            package: 'amway_superapp_creator_plugin'),
                        radius: ScreenUtil().setWidth(16),
                      ),
                    ],
                    mainAxisSize: MainAxisSize.max,
                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  ),
                )
              ],
            ),
          )),
    );
  }

  Widget _buildCircleTag(Color color, bool isShowCheck) {
    Widget showCheck() {
      if (isShowCheck) {
        return Icon(Icons.check,
            size: ScreenUtil().setSp(20), color: Colors.white);
      } else {
        return Container(width: 0, height: 0);
      }
    }

    return CircleAvatar(
      radius: ScreenUtil().setWidth(20),
      backgroundColor: Colors.grey.withOpacity(0.3),
      child: CircleAvatar(
        radius: ScreenUtil().setWidth(17),
        backgroundColor: color,
        child: showCheck(),
      ),
    );
  }

  Widget _buildTag(String title) {
    return new Container(
        height: ScreenUtil().setHeight(22),
        padding: EdgeInsets.fromLTRB(
            ScreenUtil().setWidth(9),
            ScreenUtil().setHeight(1),
            ScreenUtil().setWidth(9),
            ScreenUtil().setHeight(1)),
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(ScreenUtil().setHeight(11)),
          color: ColorUtil.fromHex('#FFE9F7F8'),
        ),
        child: (Center(
          child: Text(
            title,
            style: TextStyle(
                fontSize: ScreenUtil().setHeight(12),
                color: Colors.black.withOpacity(0.5)),
          ),
        )));
  }

  @override
  void initState() {
    // TODO: implement initState
    ZhugeEditAnalysis.editPage(EditPageType.changeColor);
    super.initState();
  }

  @override
  void dispose() {
    // TODO: implement dispose
    super.dispose();
  }

  @override
  void didUpdateWidget(ChangeThemePage oldWidget) {
    // TODO: implement didUpdateWidget
    super.didUpdateWidget(oldWidget);
  }

  @override
  void didChangeDependencies() {
    // TODO: implement didChangeDependencies
    super.didChangeDependencies();
  }

  Widget _buildBackButton() {
    return new Container(
      padding: EdgeInsets.all(ScreenUtil().setHeight(12)),
      child: new Image.asset(
        'picture/icon_back.png',
        package: 'amway_superapp_creator_plugin',
      ),
    );
  }
}
